<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for指令</title>
</head>
<body>
    <!--2.html结构-->
  <div id="app">
 <input type="button" value="添加数据" @click="add">
 <input type="button" value="移除数据" @click="remove">
 <ul>
     <li v-for="(it,index) in arr">
         {{ index+1 }}黑马程序员校区：{{ it }}
     </li>
     </ul>
     <h2 v-for="item in vegetables" v-bind:title="item.name">
         {{ item.name }}
     </h2>
  </div> 
  <!-- 开发环境版本，包含了有帮助的命令行警告--> 
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <script>
      //3.创建Vue实例
      var app=new Vue({
          el:"#app",
          data:{
              arr:["北京","上海","广州","深圳"],
              vegetables:[
                  {name:"西蓝花炒蛋"},
                  {name:"蛋炒西蓝花"},
              ]
          },
          methods:{
              add:function(){
                 this.vegetables.push({ name:"花菜炒蛋"});
              },
             remove:function(){
                  this.vegetables.shift();              }
          },
      })
  </script>
</body>
</html>